<template>
    <div class="box">
        <el-card>
            <!-- 顶部 -->
            <template #header>
                <h3>商家列表</h3>
            </template>
            <!-- 搜索区 -->
            <el-form :inline="true" :model="businessData">
                <el-form-item label="账号">
                    <el-input v-model="businessData.account" placeholder="账号" />
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="businessData.telephone" placeholder="手机号" />
                </el-form-item>
                <el-form-item label="联系人">
                    <el-input v-model="businessData.contact" placeholder="联系人" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loadBusinessList">搜索</el-button>
                </el-form-item>
                <!-- <el-form-item>
                    <el-button type="primary" >添加</el-button>
                </el-form-item> -->
            </el-form>

            <!-- 表格 -->
            <el-table :data="tableData" border stripe>
                <el-table-column prop="account" label="商家账号"></el-table-column>
                <el-table-column prop="telephone" label="商家电话"></el-table-column>
                <el-table-column prop="regTime" label="注册时间" ></el-table-column>
                <el-table-column prop="contact" label="联系人"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="handleEdit(scope.row)">
                            编辑
                        </el-button>
                        <el-button type="danger" @click="handleDelete(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <template #footer>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[2, 3, 5, 10]"
          layout="total, sizes,  prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </template>

        </el-card>
    <!-- 编辑弹窗 -->
    <el-dialog  :title="title" v-model="dialogFormVisible" >
        <el-form :model="formData">
            <el-form-item label="账号">
                <el-input v-model="formData.account" placeholder="账号" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="formData.password" placeholder="密码" />
            </el-form-item>
            <el-form-item label="电话号">
                <el-input v-model="formData.telephone" placeholder="电话号" />
            </el-form-item>
            <el-form-item label="联系人">
                <el-input v-model="formData.contact" placeholder="联系人" />
            </el-form-item>
        
            
        </el-form>
        <template #footer>
            <el-button type="primary" @click="dialogFormVisible = !dialogFormVisible">取消</el-button>
            <el-button type="primary"  @click="changeBusiness">提交修改</el-button>
        </template>

    </el-dialog>          

    </div>
</template>

<script>
import axios from 'axios';
//import dayjs from "dayjs";
import qs from "qs";
import{businessUpdateAPI}from "@/api/business";
import{businessDeleteAPI}from "@/api/business";
import{businessListAPI}from "@/api/business";

export default {
    //数据
    data() {
        return {
            //搜索的对象
            businessData: {},
            //
            formData: {},
            //表格数据
            tableData: [],
            //分页相关数据
            currentPage: 1,
            pageSize: 2,
            total: 0,
           //弹窗
           dialogFormVisible: false,
            title:"编辑商家",
            //搜索
            query:{}

        }

    },
    //方法
    methods: {
        handleSizeChange() {
      this.loadBusinessList();
    },
    handleCurrentChange() {
      this.loadBusinessList();
    },
        //加载页面函数
        load() {
            axios.get("http://localhost:8080/ele/AllBusiness").then(resp => {
                console.log(resp);
                this.tableData = resp.data;
            })
        },
        // 格式化数据的方法
        formatDate(a, b, c, d) {
            return dayjs(c).format("YYYY-MM-DD HH:mm:ss");
        },
        //编辑按钮触发
        handleEdit(row){
            console.log(row);
            //跳出弹窗
            this.dialogFormVisible=!this.dialogFormVisible;
            //传输数据
            this.formData=row;
        },
        //提交修改
        changeBusiness(){
            businessUpdateAPI(this.formData).then(resp=>{
                console.log(resp);
                ElNotification({
                    title: "成功",
                    message: "修改成功",
                    type: "success",
                });
                //关闭弹窗
                this.dialogFormVisible=!this.dialogFormVisible;
                //刷新数据
                this.loadBusinessList();
            })
        },
        //删除按钮触发
        handleDelete(row){
            console.log(row);
            axios.get("http://localhost:8080/ele/deleteBusiness?id="+row.id).then(resp=>{
                console.log(resp);
                ElNotification({
                    title: "成功",
                    message: "删除成功",
                    type: "success",
                });
                //刷新数据
                this.loadBusinessList();
            })
        },
        // //搜索按钮触发 ：自己写的
        // search(){
        //     axios.post("http://localhost:8080/ele/searchBusiness",qs.stringify(this.businessData)).then(resp=>{
        //         console.log(this.businessData);
        //         this.tableData=resp.data;
        //         //
        //     })
        // },
        //加载页面，分页查询
        loadBusinessList() {
      businessListAPI({
        ...this.businessData,
        currentPage: this.currentPage,
        pageSize:this.pageSize
      }).then((resp) => {
        this.total = resp.data.total;
        this.tableData = resp.data.datas;
      });
    },



    },
    // 生命周期函数
    created(){
        // console.log('created');
        // this.load();
        this.loadBusinessList();
    }
    

}
</script>

<style scoped></style>